<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>我的店铺</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .business {
            position: absolute;
            right: 0;
            top: 0.05rem;
            font-size: 0.2rem;
            color: white;
        }

        .top-nav-area {
            background-color: #F23A38;
            background-image: none;
            border-bottom: none;
        }

        .main-area {
            position: relative;
            width: 100%;
            height: 5rem;
            background-color: #F23A38;
        }

        .head-top-img {
            position: absolute;
            width: 50%;
            height: auto;
            margin: auto;
            left: 25%;
            top: 1rem;
        }

        .img-box {
            height: 1.3rem;
            width: 1.3rem;
            background-color: antiquewhite;
            margin: 0.5rem auto 0 auto;
            background-image: url("./img/touxiangImg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 50%;
        }

        .myInfo {
            text-align: center;
            height: auto;
            width: 100%;
            line-height: 0.4rem;
            padding: 0.2rem 0;
            font-size: 0.28rem;
            color: white;
        }

        .quantity {
            width: 60%;
            height: 0.8rem;
            position: absolute;
            bottom: 0.1rem;
            left: 20%;

        }

        .count-box ul {
            height: 100%;
            width: 100%
        }

        .info-count-show, .info-ratio-show, .info-num-show {
            padding-left: 10%;
            float: left;
            width: 23.33%;
            text-align: left;
            font-size: 0.3rem;
            line-height: 0.9rem;
            background-size: 0.4rem;
            background-position: 0.1rem center;
            background-repeat: no-repeat;
            text-indent: 0.1rem;
            color: white;
        }

        .info-count-show {
            background-image: url("./img/xing.jpg")
        }

        .info-ratio-show {
            background-image: url("./img/hua.jpg")
        }

        .info-num-show {
            background-image: url("./img/san.jpg")
        }

        /*以下为主体*/
        .status-area {
            padding-top: 0.3rem;
            width: 90%;
            height: auto;
            margin: auto;
        }

        .all-say {
            color: #666;
            width: 100%;
            font-size: 0.28rem;
            height: 0.6rem;
            text-align: left;
            line-height: 0.6rem;
        }

        /*选择区域*/
        .select-ul {
            overflow: hidden;
            width: 90%;
            height: auto;
            margin: auto;
        }

        .select-ul li {
            text-align: center;
            width: 2rem;
            float: left;
            height: 0.5rem;
            margin: 0.1rem 0.1rem;
        }

        .type-list-ul li {
            margin: 0.24rem 0 0.24rem 0.2rem;
            float: left;
            height: 0.5rem;
        }

        .select-ul li p input {
            display: none;
        }

        .type-list-ul li p input {
            display: none;
        }

        .select-ul li lib, .type-list-ul li lib {
            color: #666;
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            background-color: transparent;
            border: 1px solid #ADADAD;
            border-radius: 0.1rem;
        }

        /*选矿*/
        .select-ul li p label,
        .type-list-ul li p label {
            font-size: 0.28rem;
            color: #FA8072;
            width: 100%;
            height: 100%;
            display: inline-block;
            border-color: #FA8072;
            line-height: 0.5rem;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
            box-sizing: border-box;
        }

        .type-list-ul li p label {
            width: auto;
            padding: 0 0.1rem;
        }

        .select-ul li p {
            height: 0.5rem;
            width: 100%;
            display: inline-block;
            line-height: 0.55rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .type-list-ul li p {
            height: 0.5rem;
            display: inline-block;
            line-height: 0.55rem;
        }

        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label {
            border-color: #FA8072;
            color: #FA8072;
        }

        /*以上为选择框*/
        .assess-li {
            padding: 0.1rem 0;
            width: 90%;
            height: 0.8rem;
            /*background-color: aqua;*/
            margin: auto;
        }

        .assess-li-box {
            position: relative;
            height: 100%;
            width: 100%;
            border-top: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
        }

        .assessLeft {
            float: left;
        }

        .assessRight {
            float: right;
        }

        .assessLeft, .assessRight {
            color: #666;
            font-size: 0.28rem;
            width: 49%;
            text-align: center;
            height: 100%;
            line-height: 0.8rem;
        }

        .assess-line {
            position: absolute;
            width: 1px;
            height: 0.5rem;
            background-color: #e3e3e3;
            left: 50%;
            top: 0.15rem;
        }

        .selected-assess {
            color: #F23A38
        }

        /*以下为评价*/
        .assess-ul-area {
            margin-bottom: 1rem;
            height: auto;
            width: 100%;
        }

        .assess-ul-area li {
            border-bottom: 1px solid #e3e3e3;
            height: 2rem;
            font-size: 0.28rem;
            padding: 0.2rem 0 0.3rem 0;
            color: #666;
        }

        .evalute-area {
            height: 1.4rem;
            width: 100%;
            padding-top: 0.3rem;
        }
        .evalute-box{
            display: inline-block;
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;white-space: nowrap;
            overflow: hidden;text-overflow: ellipsis;
        }
        .evalute-font{
            height: 0.5rem;
            line-height: 0.5rem;white-space: nowrap;
            overflow: hidden;text-overflow: ellipsis;
        }
        .party-area{
            height: 0.5rem;
            line-height: 0.5rem;
        }
        .party-phone{
            float: left;
        }
        .party-data{
            float: right;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>

<!--主体-->
<div class="main-area">
    <!--导航-->
    <div class="top-nav-area">
        <ul>
            <a class="back-a" href="javascript:history.back(-1)"></a>
            <li>我的店铺</li>
            <a class="business" href="./analysis.html">经营分析</a>
        </ul>
    </div>
    <div class="head-top-img">
        <div class="img-box"></div>
        <div class="myInfo">
            <div>关小龙</div>
            <div>lv.2</div>
            <div style="opacity: 0.8">已缴纳保证金</div>
        </div>

    </div>
    <div class="quantity">
        <ul>
            <li class="info-count-show">6.3</li>
            <li class="info-ratio-show">96%</li>
            <li class="info-num-show">602次</li>
        </ul>
    </div>

</div>
<div class="status-area">
    <div class="all-say">大家都在说</div>
</div>
<ul class="select-ul">
    <li>
        <p>
            <input name="area" type="checkbox" value="1" id="check1">
            <label for="check1">技术不错(13)</label>
        </p>
    </li>
    <li>
        <p>
            <input name="area" type="checkbox" value="2" id="check2">
            <label for="check2">技术不错(13)</label>
        </p>
    </li>
    <li>
        <p>
            <input name="area" type="checkbox" value="3" id="check3">
            <label for="check3">技术不错(13)</label>
        </p>
    </li>
    <li>
        <p>
            <input name="area" type="checkbox" value="4" id="check4">
            <label for="check4">技术不错(13)</label>
        </p>
    </li>
    <li>
        <p>
            <input name="area" type="checkbox" value="5" id="check5">
            <label for="check5">技术不错(13)</label>
        </p>
    </li>

</ul>
<div class="assess-li">
    <div class="assess-li-box">
        <div class="assessLeft selected-assess">待评价</div>
        <span class="assess-line"></span>
        <div class="assessRight">全部</div>
    </div>
    <ul class="assess-ul-area">
        <li>
            <span>送货到家并安装</span>
            <div class="evalute-area">
                <div class="evalute-box">
                    <span>好评</span>
                    <span>服务态度 5分</span>
                    <span>服务态度 5分</span>
                    <span>服务态度 5分</span>
                </div>
                <div class="evalute-font">
                    服务好，手艺好，态度和谐
                </div>
                <div class="party-area">
                    <span class="party-phone">用户 12***12</span>
                    <span class="party-data">2017.12.12  12:12:56</span>
                </div>
            </div>
        </li>
        <li>
            <span>送货到家并安装</span>
            <div class="evalute-area">
                <div class="evalute-box">
                    <span>好评</span>
                    <span>服务态度 5分</span>
                    <span>服务态度 5分</span>
                    <span>服务态度 5分</span>
                </div>
                <div class="evalute-font">
                    服务好，手艺好，态度和谐
                </div>
                <div class="party-area">
                    <span class="party-phone">用户 12***12</span>
                    <span class="party-data">2017.12.12  12:12:56</span>
                </div>
            </div>
        </li>
    </ul>
</div>


<script src="../../lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.assessLeft').click(function () {
            $('.assessLeft').addClass('selected-assess');
            $('.assessRight').removeClass('selected-assess');
        });
        $('.assessRight').click(function () {
            $('.assessRight').addClass('selected-assess');
            $('.assessLeft').removeClass('selected-assess');
        });
    });

</script>
</body>
</html>